<template>
	<view class="main" v-if='myRelation'>
		<view class="user">
			<view class="left">
				<image src="@/static/images/heade1.png" mode='widthFix' style="width:160rpx;"></image>
				<view class="info">
					<view class="tit">{{myRelation.name}}</view>
					<view>手机号：{{myRelation.mobile}}</view>
					<view>身份证号：{{myRelation.cardId}}</view>
				</view>
			</view>
			
		</view>
		<view class="peopleInfo" v-if='myRelation'>
			<view class="health">
				<view class="healthInfo">
					<view class="tit">血压</view>
					<view class="content" v-if="myRelation.bloodPressureMax">
						<text>
						{{myRelation.bloodPressureMax+'~'+myRelation.bloodPressureMin}}
						</text>mmHg</view>
					<view class="content" v-else>暂无</view>
					
				</view>
				<image src="@/static/images/indexicon1.png" class="img"  mode='heightFix'></image></view>
				<view class="health">
				<view class="healthInfo">
					<view class="tit">血氧</view>
					<view class="content" v-if="myRelation.bloodOxygen"><text>{{myRelation.bloodOxygen}}</text>%</view>
					<view class="content" v-else>暂无</view>
				</view>
				<image src="@/static/images/indexicon2.png" class="img"  mode='heightFix'></image></view>
				<view class="health">
				<view class="healthInfo">
					<view class="tit">体温</view>
					<view class="content" v-if="myRelation.temperature"><text>{{myRelation.temperature}}</text>摄氏度</view>
					<view class="content" v-else>暂无</view>
				</view>
				<image src="@/static/images/indexicon3.png" class="img"  mode='heightFix'></image></view>
				<view class="health">
				<view class="healthInfo">
					<view class="tit">睡眠</view>
					<view class="content" v-if="myRelation.totalSleep"><text>{{myRelation.totalSleep}}</text>小时</view>
					<view class="content" v-else>暂无</view>
				</view>
				<image src="@/static/images/indexicon4.png" class="img"  mode='heightFix'></image></view>
			
			
		</view>
			
			
		
		<view class="device" @click="addDevices" v-if="deviceList.length<=0">
			<view class="left">
				<view>暂未绑定任何设备</view>
				您可以选择适合您的设备绑定
			</view>
			<image src="@/static/images/link.png" @click="addDeview"  mode='widthFix' style="width:140rpx;"></image>
		</view>
		<view class="deviceInfo" v-else>
			<view class="deviceInfoTit">
				已绑定设备
				<view @click="addDevices">添加</view>
			</view>
			<view class="deviceList">
				<view class="deviceLi" v-for="(item,index) in deviceList" @click="deviceClick(item)" :key="index">
					<view class="deviceview" >
						<!--  -->
						<view class="name">
							<image style="height:90rpx;" mode="heightFix" :src="diveimg(item.deviceType)"></image>
							{{item.deviceName}}
						</view>
						<view @click.stop="cancelDevice(item)"><u-switch v-model="val" :disabled="true" activeColor="#ec7f42" size="16" ></u-switch></view>
					</view>
					<view>{{item.deviceNickName}}</view>
					<view>{{item.deviceImei}}</view>
					<!-- <view class="cancelBindDevice" 取消</view> -->
				</view>


			</view>



		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				val:true,
				id:"",
				deviceDetail:[],
				myRelation:null,
				deviceList:[]
			}
		},
		onLoad(e){
			this.id = e.id;
			this.getDeviceDetail();
		},
		methods: {
			addDevices(){
				uni.navigateTo({
					url: `/pages/addDevice/deviceTypeList?infoId=${this.id}`,
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			getDeviceDetail(){
				this.$http.deviceList({infoId:this.id}).then(res=>{
					if(res.code==0){
						this.myRelation=res.detail;
						this.deviceList = res.detail.list;
					}
				})
			},
			diveimg(id){
				let deviceTypeList = this.$tools.deviceTypeList();
				for(let i in deviceTypeList){
					if(deviceTypeList[i].id==id){
						console.log(123)
						return "../../static/images/deicon"+deviceTypeList[i].icon+".png"
					}
				}
			},
			cancelDevice(item){
					uni.showModal({
									title: '提示',
									content: '确定解除绑定'+item.deviceNickName+'？',
									cancelText: "取消", // 取消按钮的文字  
									confirmText: "确认", // 确认按钮的文字  
									showCancel: true, // 是否显示取消按钮，默认为 true
									confirmColor: '#f55850',
									cancelColor: '#39B54A',
									success: (res) => {
									if(res.confirm) {  
										this.$http.cancelBindDevice({id:item.id}).then(res=>{
											if(res.code==0){
												this.$tools.msg("取消成功");
												this.getDeviceDetail();
											}else{
												this.$tools.msg(this.$msg.getMsgCN(res.msg));
											}
										})
										
									} else {  
										console.log('cancel') //点击取消之后执行的代码
									}  
									} 
								})
	
				
			
			},
			deviceClick(item){
				uni.navigateTo({
					url:`/pages/deviceDetail/deviceDetail?id=${item.id}`
				})
			},
			fullow(){
				uni.navigateTo({
					url:"/pages/followUser/followUser"
				})
			},
			user(){
				uni.navigateTo({
					url:"/pages/userInfo/userInfo"
				})
			},
			
		}
	}
</script>

<style scoped >
	.main{
		background: url(@/static/images/diveInfo.png) no-repeat;
		background-size:100% auto;
		padding:30rpx 30rpx;
		font-size:26rpx;
	}

	.user{
		padding-top:60rpx;
		padding-bottom: 10rpx;
	}
	.user .left{
		display: flex;
		align-items: center;
		color: #888;
	}
	.user .left .tit{font-size:40rpx;font-weight: bold;color:#000;padding-bottom: 10rpx;}
	.user .left .info{padding-left:30rpx;}

	.peopleInfo{display:flex; flex-wrap: wrap; justify-content: space-between;}
	.health{background:#fff;border-radius: 26rpx;padding:30rpx;margin-top:30rpx;width:48%; box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	.health .healthInfo .tit{color:#000;font-weight: bold;color:#000;font-size:36rpx;}
	.health .content{padding-top:22rpx;color:#999;display: flex; align-items: center;}
	.health .content text{
		color:#666;width:140rpx;display: inline-block;font-size:30rpx;
	}
	.health .img{height:72rpx;position: absolute;right:30rpx;top:30rpx;}

	.device{
		margin:30rpx 0;
		padding:30rpx 50rpx;
		color:#fff;
		border-radius: 30rpx;
		background: linear-gradient(to right,#2aac7e,#63ce91);
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.device .left view{font-size:40rpx;margin-bottom: 10rpx;}
	.deviceInfo{
		background:#fff;
		border-radius: 30rpx;
		margin-top:30rpx;
	}
	.deviceInfo .deviceInfoTit{
		height:80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		border-bottom:1rpx solid #d2d2d2;
		font-size: 34rpx;
	}
	.deviceLi{
		background: linear-gradient(to right,#2aac7e,#63ce91);
		width:48%;
		margin-top:30rpx;
		color:#fff;
		padding:30rpx;
		box-sizing: border-box;
		border-radius: 14rpx;
	}
	.deviceList{padding:0 30rpx 30rpx 30rpx;display: flex; 
				justify-content: space-between;}
	.deviceview{
		 display: flex;	justify-content: space-between;
		 padding-bottom:50rpx;
	}
	.deviceview .name{
		display: flex;
		align-items: flex-start;
	}
	.deviceview .name image{
		margin-right:14rpx;
	}

</style>
